<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-descriptions title="设备属性">
        <a-descriptions-item label="设备名">{{
          deviceInfo.Name
        }}</a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-switch
            checked-children="在线"
            un-checked-children="离线"
            v-model="deviceInfo.Online"
            :disabled="!deviceInfo.Online"
          />
        </a-descriptions-item>
          <a-descriptions-item label="开/关">
          <a-switch
            checked-children="开"
            un-checked-children="关"
            @change="powerChange"
            v-model="power"
          />
        </a-descriptions-item>
        <a-descriptions-item label="ProductKey">{{
          deviceInfo.Key
        }}</a-descriptions-item>
        <a-descriptions-item label="DeviceSecret">
          <span>{{ deviceSecret }}</span>
          <a-button style="margin-left: 10px" type="link" @click="handelSecret">
            查看
          </a-button>
        </a-descriptions-item>
      </a-descriptions>
      <a-divider style="margin-bottom: 32px" />
      <div class="title">消息发布</div>
      <div :bordered="false">
        <a-select
          size="large"
          style="width: 100%"
          v-model="publishTopic"
          v-decorator="[
            'topic',
            {
              rules: [{ required: true, message: '请选择发布主题' }],
            },
          ]"
          placeholder="选择一个发布主题"
        >
          <a-select-option
            :value="item.Topic"
            v-for="(item, index) in topicList"
            :key="index"
          >
            {{ item.Topic }}
          </a-select-option>
        </a-select>

        <a-textarea
          rows="4"
          placeholder="请输入消息内容"
          style="margin-top: 10px"
          v-model="publishData"
          v-decorator="[
            'message',
            { rules: [{ required: true, message: '请输入消息内容' }] },
          ]"
        />

        <a-button
          style="margin-top: 10px; margin-bottom: 24px; float: right"
          @click="publish"
          type="primary"
          >发布</a-button
        >
      </div>
      <a-divider />
      <div class="title">Topic管理</div>
      <s-table
        style="margin-bottom: 24px"
        row-key="Topic"
        :columns="topicColumns"
        :data="loadTopicData"
      >
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from "@/components";
import { getSecret, getDeviceTopic, deleteDevice } from "@/api/device";
import {
  setListen,
  createConnection,
  doSubscribe,
  doPublish,
  doUnSubscribe,
  destroyConnection,
} from "@/utils/mqtt";
export default {
  components: {
    STable,
  },
  created() {
    this.deviceInfo = this.$route.query;
    this.deviceInfo.Online = JSON.parse(this.deviceInfo.Online);
    setListen((topic, message) => {

      if (topic == this.topicList[0].Topic) {
        console.log(message);
        if (message.code == 10) {
          this.deviceInfo.Online = true;
          this.$notification["success"]({
            message: "设备已上线",
            description: `设备${message.data.deviceName}已上线`,
          });
        }
        if (message.code == 20) {
          this.deviceInfo.Online = false;
           this.$notification["error"]({
            message: "设备已离线",
            description: `设备${message.data.deviceName}已离线`,
          });
        }
      }
    });
  },
  destroyed() {
    console.log("destroyed");
    doUnSubscribe(this.topicList[0].Topic)
  },
  data() {
    return {
      deviceInfo: {},
      form: {},
      power:false,
      deviceSecret: "******",
      topicColumns: [
        {
          title: "设备的Topic",
          dataIndex: "Topic",
          key: "Topic",
        },
        {
          title: "操作说明",
          dataIndex: "Explain",
          key: "Explain",
        },
      ],
      publishTopic:"",
      publishData:"",
      topicList: [],
      // 加载数据方法 必须为 Promise 对象
      loadTopicData: () => {
        return new Promise((resolve) => {
          getDeviceTopic(this.deviceInfo.ID).then((res) => {
            this.topicList = res.data;
            resolve({
              data: res.data,
              pageSize: 10,
              pageNo: 1,
              totalPage: 1,
              totalCount: 10,
            });
            this.subscribeOnline();
          });
        }).then((res) => {
          return res;
        });
      },
    };
  },

  methods: {
    powerChange(){
       doPublish(this.topicList[1].Topic,0,this.power?"On":"Off")
    },
    publish(){
      if (this.publishTopic.length == 0){
        this.$message.error("请选择发布主题")
        return
      }
      doPublish(this.publishTopic,0,this.publishData)
    },
    subscribeOnline() {
      console.log("订阅设备在线状态");
      doSubscribe(this.topicList[0].Topic, 0);
    },
    handelSecret() {
      getSecret(this.deviceInfo.ID).then((res) => {
        this.deviceSecret = res.data.Secret;
      });
    },
  },
  computed: {
    title() {
      return this.$route.meta.title;
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
</style>
